import React, { useEffect, useState } from 'react'
import { Button, message, Popconfirm, Select, Table } from 'antd'
import AddDialog from './add'
import EditDialog from './edit'

function Index() {
  const [projectList, setProjectList] = useState([])

  async function getProjectList() {
    let res = await window.electron.ipcRenderer.invoke('project-list')
    setProjectList(
      res.map((item) => {
        return {
          value: item.id,
          label: item.name
        }
      })
    )
  }

  async function remove(record) {
    await window.electron.ipcRenderer.invoke('password-delete', record)
    await getPasswordList()
  }

  const columns = [
    {
      title: '账号',
      dataIndex: 'username',
      key: 'username'
    },
    {
      title: '密码',
      dataIndex: 'password',
      key: 'password'
    },
    {
      title: '备注',
      dataIndex: 'tip',
      key: 'tip'
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => {
        return (
          <div>
            <Button
              type="link"
              onClick={() => {
                edit(record)
              }}>编辑</Button>
            <Popconfirm
              title="确认删除吗?"
              onConfirm={() => {
                remove(record)
              }}
              okText="Yes"
              cancelText="No"
            >
              <Button type="link" danger>删除</Button></Popconfirm>
          </div>
        )
      }
    }
  ]

  const [tableData, setTableData] = useState([])
  const [addVisible, setAddVisible] = useState(false)
  const [editVisible, setEditVisible] = useState(false)
  const [current, setCurrent] = useState(null)
  const [projectId, setProjectId] = useState(null)

  async function getPasswordList(value) {
    if(value){
      setProjectId(value)
      let res = await window.electron.ipcRenderer.invoke('password-list', { projectId: value })
      setTableData(res)
    } else {
      let res = await window.electron.ipcRenderer.invoke('password-list', { projectId: projectId })
      setTableData(res)
    }
  }

  function edit(record) {
    setCurrent(record)
    setEditVisible(true)
  }

  const [messageApi, contextHolder] = message.useMessage();
  function add() {
    if (projectId) {
      setAddVisible(true)
    } else {
      messageApi.info('你还没有选择项目！');
    }
  }

  async function saveAdd(data) {
    let param = data.map((item) => {
      delete item.key
      item.projectId = projectId
      return item
    })
    await window.electron.ipcRenderer.invoke('password-add', { list: param })
    setAddVisible(false)
    await getPasswordList(projectId)
  }

  async function saveEdit(data) {
    await window.electron.ipcRenderer.invoke('password-update', data)
    setEditVisible(false)
    await getPasswordList(projectId)
  }

  useEffect(() => {
    getProjectList()
  }, [])

  return (
    <div>
      {contextHolder}
      <div className={'mb-4 flex justify-between'}>
        <Select options={projectList} onChange={getPasswordList} className={'w-30'} />
        <Button onClick={add}>添加</Button>
      </div>
      <Table columns={columns} dataSource={tableData} rowKey={'id'}></Table>
      <AddDialog
        projectId={projectId}
        visible={addVisible}
        onCancel={() => setAddVisible(false)}
        onSave={saveAdd}
      ></AddDialog>
      <EditDialog
        visible={editVisible}
        current={current}
        onCancel={() => setEditVisible(false)}
        onSave={saveEdit}
      ></EditDialog>
    </div>
  )
}

export default Index
